<template>
  <div>
    <div class="person-wrapsg" ref="personWrapsg">
      <!--v-for="a in indexaa"-->
      <ul class="person-listsg" ref="personTabsg">
        <li class="person-itemsg" >
          <span v-for="a in indexaa">
          <van-image width="12rem" height="11rem" fit="contain" style="display: inline-block;padding: 0 5px" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "personScrollzs",
      data(){
        return{
          indexaa:5,
        }
      },
      created() {
        this.$nextTick(() => {
          this.personScrollsg();
      });
      },
      methods:{
        personScrollsg(){
          // 默认有六个li子元素，每个子元素的宽度为120px
          let width = 1 * 80;
          this.$refs.personTabsg.style.width = width + "rem";
          // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
          this.$nextTick(() => {
            if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.personWrapsg, {
              startX: 0,
              click: true,
              scrollX: true,
              // 忽略竖直方向的滚动
              scrollY: false,
              eventPassthrough: "vertical"
            });
          } else {
            this.scroll.refresh();
          }
        });
        },
      }
    }
</script>

<style scoped>

</style>
